<template>
	<view>
		<u-navbar 
		            :title="title+'领取记录'" 
		            left-text="返回" 
		            @click-left="onClickBack" 
		        ></u-navbar>
		<view class="imgbox u-border-bottom u-m-b-10">
<!-- 			<p>已上传的图片记录</p> -->
			<view class="imglist">
				<view v-for="(item, index) in imgUrl">
				</view>
			<htz-image-upload   v-model="imgUrl"
				:disabled="true" ></htz-image-upload>
			</view>
		</view>
		<view class="u-flex btns">
			<button class="btn u-font-lg u-m-t-10 u-m-b-10" @click="uploadImgs()" v-if="infoObj.isUpload==1">重新上传</button>
			<button class="btn u-font-lg u-m-t-10 u-m-b-10" @click="uploadImgs()" v-else>添加图片</button>
			<button class="btn u-font-lg" @click="inprov()" v-show="imgUrl.length!=0">确认提交</button>
		</view>
		<view class="imgbox u-border-bottom u-m-b-10 u-border-top" v-show="false">
			<p v-show="imgUrl.length!=0">可编辑的图片记录</p>
			<view class="imglist">
<!-- 				<view v-for="(item, index) in imgUrl">
					<uploadimg :item="item" :index="index" :imgUrlS="imgUrl"
						style="flex:1;margin:10rpx 10rpx 10rpx 40rpx; zoom:0.6">
					</uploadimg>
				</view> -->
				<!-- <htz-image-upload  v-model="imgUrl" :remove="false"></htz-image-upload> -->
				<htz-image-upload  :max="5" v-model="imgUrl"
				 :action="action" :disabled="true"></htz-image-upload>
			</view>
		</view>
	</view>
</template>

<script>
	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
	export default {
		components: {
			htzImageUpload,
		},
		data() {
			return {
				action: '', //上传图地址
				title:'',
				planId:'', //列表id
				isUpload:'',
				imgUrl: [],//上传队列
				newImg:[],
				await:[] ,//待上传
				infoObj:{}  //	全部内容
			};
		},
		onLoad(option){
			this.title = option.title;
			this.planId = option.id;
			this.isUpload = option.isUpload //首次标识
			this.getAlready()
		},
		methods: {
			getAlready(){
					this.config.get('/flow/getNutritionRecord',{
						planId:this.planId,
					}).then((res)=>{
						console.log(res)
						this.infoObj = res.data.data
						this.imgUrl=(res.data.data.uploadImg.split(','))
					})
			},
			inprov(){
				if(this.imgUrl.length<=0){
					uni.showToast({
						title:'至少上传一张图片',
						icon:'none'
					})
					return
				}
				let newImg= this.imgUrl.join(',');
				this.config.post('/flow/uploadNatritionImg',{
					planId:this.planId,
					uploadImg:newImg
				}).then((res)=>{
					uni.showToast({
						title:res.data.msg
					})
					setTimeout(()=>{
						uni.navigateBack({
						})
					},800)
				})
			},
			uploadImgs() {
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: "compressed",
					sourceType: ["album"],
					success(res) {
						uni.showLoading({
							title: "加载中",
							mask: true,
							duration: 5000,
						});
						setTimeout((s) => {
							uni.hideLoading();
						}, 5000);
						self.config.upload(
							res.tempFiles[0],
							(file) => {
								uni.hideLoading();
								// //console.log('上传成功了:', file)
								if (file.code === 200) {
									self.picbox = true;
									self.imgUrl.push(file.msg);
								} else {
									uni.showToast({
										title: file.message,
										icon: "none",
									});
								}
							},
							(progress) => {
								// //console.log('进度：' + progress)
							}
						);
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.imgbox {
		width: 100%;
		display: flex;
		flex-direction: column;

		.imglist {
			display: flex;
			flex-wrap: wrap;
		}

		p {
			align-self: center;
			margin: 20rpx;
		}
	}
	.btn{
		width: 40%;
		height: 70rpx;
		color: white;
		background-color: skyblue;
	}
</style>
